/**
 * pointwidget.
 * 系统内建核心组件, 为系统提供Point Widget (className: DSV_PointWidget)
 */

var FG;
if (!FG)
    FG = {};

FG.PW_TEMPLATE = _.template(
    //'<div class="pointwidget" id="pw-<%= uuid %>">' +
        '<div class="figscreen screen">' +
            '<div class="figure"></div>' +
            //'<div class="fig_title"></div>' +
            '<div class="fig_top_panel version_coord_box"></div>' +
            '<div class="fig_right_panel level_coord_box"></div>' +
            '<div class="fig_bottom_panel time_coord_box"></div>' +
            '<div class="loading">' +
                '<i class="fa fa-spinner fa-spin fa-3x"></i>' +
            '</div>' +
            '<div class="hint">' +
                '请在右侧选择所需的数据集/变量' +
            '</div>' +
        '</div>' +
        //'<div class="screen"></div>' +  // 待实现和定名.
        '<div class="separator">' +
        '</div>' +
        '<div class="toolwidget">' +
            '<input class="name_edit" type="text" />' +
            '<input class="lonlat_edit" type="text" readonly/>' +
            //'<div class="lonlat_edit"></div>' +
            '<div class="sample_label inactive">样品</div>' +
            '<div class="button delete_this layer"><i class="fa fa-times-circle"></i></div>' +
            '<div class="button camera layer" title="快照"><i class="fa fa-camera"></i></div>' +
            '<div class="button_row">' +
                '<div class="button buy inactive" title="购买"><i class="fa fa-shopping-cart "></i></div>' +
                '<div class="button ds" title="物理量列表"><i class="fa fa-list-alt "></i></div>' +
                '<div class="button download" title="下载"><i class="fa fa-download"></i></div>' +
                '<div class="button edit" title="编辑描述信息"><i class="fa fa-edit "></i></div>' +
                    //'<div class="button min"><i class="icon "></i></div>' +
                '<div class="button snapshots" title="查看快照列表和删除"><i class="fa fa-caret-square-o-right"></i>/<i class="fa fa-trash"></i></div>' +
                '<div class="photo_port"></div>' +
            '</div>' +
            //'<div class="button snapshots"><i class="icon-expand "></i></div>' +
            '<div class="ds_box toolbox">' +
                '<select class="dataset" title="数据集"></select>' +
                '<div class="subset">' +
                '</div>' +
            '</div>' +
            '<div class="buy_box toolbox"></div>' +
            '<div class="edit_box toolbox"></div>' +
            '<div class="download_box toolbox"></div>' +
            '<div class="snapshot_box toolbox"></div>' +
            //'<div class="snapshot_box toolbox"></div>' +
        '</div>' //+
    //'</div>'
);

FG.PointWidget = FG.FeatureDSVWidgetBase.extend({
    includes: [L.Mixin.Events ],
    
    statics: {
        className: 'DSV_PointWidget'
    },
    
    options: {
        minWidth: 50,
        maxWidth: 1000,
        // maxHeight: null,
        autoPan: true,
        closeButton: false,
        offset: [0, 7],
        autoPanPadding: [45, 60],
        //autoPanPadding: [100, 100],
        autoPanPaddingTopLeft: [355, 60],
        autoPanPaddingBottomRight: [45, 45],
        keepInView: false,
        zoomAnimation: true,
        className: '',
        widgetClassName: 'pointwidget',
        widgetTemplate: FG.PW_TEMPLATE,
        widgetPrefix: 'leaflet-pointwidget',
        widgetType: 'point'
    },
    
    
    renderModel: function(model) {
        this._renderModelBasic(model);
        this._renderTools();
        // 左侧的不同屏幕们.
        this.screens = {
            fig: this.$figscreen
        };
        this.screen = 'fig';
        this.$figure = this.$content.find('.figscreen .figure');
        this.$loading = this.$content.find('.figscreen .loading');
        this.$hint = this.$content.find('.figscreen .hint');
        // 填充内容及预备初步渲染
        this.$name_edit.val(model.get('name'));
        var info  = model.get('info');
        if (!!info && _.has(info, 'lat') && _.has(info, 'lon')){
            this.$lonlat_edit.val(info.lat.toFixed(5)+'°N '+info.lon.toFixed(5)+'°E');
        }
        // 为坐标准备的CoorderView TODO: coorderView target??
        if (!!this.coorderView) {
            this.coorderView.clear();
            delete this.coorderView;
        }
        this.coorderView = new FG.CoorderView({
            el: this.screens['fig']
        });


        this._renderDSV();

        this.setContent(this.$content[0]);

        this._switchDefaultViewport();
        return this;
    },


    // 切换屏幕
    toggleScreen: function(target) {
        _.each(this.screens, function(screen, key){
            if (key === target) {
                screen.css("z-index", "999");
            } else {
                screen.css("z-index", "0");
            }
        });
        this.screen = target;
        return this;
    }

});

// // 生成widget
// FG.getPointWidget = function(opts, widgetOpts, source) {
//     var this_ = this;
//     this.widgetOpts = _.extend({}, widgetOpts);
//
//     var widget = new FG.PointWidget(this.widgetOpts, source);
//     return widget;
// };


